<script setup>
  import {computed,ref} from "vue";
  import boyImg from '../../assets/img/boy.png'
  import girlImg from '../../assets/img/girl.png'

  const props= defineProps({
    cardType:{
      type:String,
      required: true,
      validator: value => {
        return value === 'boy' || value === 'girl';
      }
    },
    height:{
      type:String,
      required:true,
      default:'35vh'
    }
  })

  const emits = defineEmits(['get','put'])

  const getMsg = ()=>{
    emits('get')
  }

  const putMsg = ()=>{
    emits('put')
  }

  const bgi = ref();
  if (props.cardType === 'boy') {
    bgi.value= 'url(\''+boyImg+'\')';
  } else {
    bgi.value= 'url(\''+girlImg+'\')';
  }



</script>
<template>
  <view id="base">
    <view class="container">
      <div class="btn" @click="putMsg">放入纸条</div>
      <div class="btn" @click="getMsg">抽取纸条</div>
    </view>
  </view>
</template>




<style scoped lang="less">

#base{
  border-radius: 5px;
  background: v-bind("bgi");
  background-size: 100% 100%;
  height: v-bind("height");
  position: relative;
  display: inline-block;
  align-items: center;

  .container{
    position: absolute;
    width: 100%;
    height: 4vh;
    bottom: 1vh;
    display: flex;
    justify-content: space-around;
    .btn{
      box-sizing: border-box;
      border: 1px ridge yellow;
      color: white;
      width: 40%;
      background-color: rgba(0, 0, 0, 0.70);
      border-radius: 5px;
      line-height: 3.7vh;
      text-align: center;
      font-size: 1em;
    }
    .btn:active{
      border: 1px ridge rgba(115, 255, 0, 0.68);
      color: black;
      background-color: rgba(255, 255, 255,70);
    }
  }
}
</style>
